<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>{$data.appName}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
    <style>
        body {
            background-color: #f8f8f8;
            color: #333;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        .app-container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        }

        .app-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .app-icon {
            width: 100px;
            height: 100px;
            border-radius: 20px;
            margin-right: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .app-title {
            flex: 1;
        }

        .app-title h1 {
            font-size: 28px;
            margin-bottom: 5px;
            color: #333;
        }

        .app-title p {
            color: #888;
            margin: 5px 0;
        }

        .app-badge {
            display: inline-block;
            padding: 4px 8px;
            background-color: #f2f2f2;
            border-radius: 4px;
            font-size: 12px;
            color: #666;
            margin-right: 10px;
            margin-top: 5px;
        }

        /* 头部下载按钮区域 */
        .header-download {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .preview-container {
            margin-bottom: 30px;
            overflow: hidden;
            border-radius: 10px;
            background-color: #fafafa;
            padding: 20px;
        }

        .preview-title {
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;
            padding-left: 15px;
        }

        .preview-title:before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            height: 16px;
            width: 4px;
            background-color: #1E9FFF;
            border-radius: 2px;
        }

        .preview-item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
        }

        .preview-img {
            height: 500px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            display: block;
            margin: 0 auto;
            object-fit: contain;
        }

        .layui-carousel-ind li.layui-this {
            background-color: #1E9FFF;
        }

        .app-desc {
            padding: 20px;
            background-color: #fafafa;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .app-desc p {
            line-height: 1.8;
            color: #555;
        }

        .app-info {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 30px;
            padding: 20px;
            background-color: #fafafa;
            border-radius: 10px;
        }

        .info-item {
            flex: 1;
            min-width: 200px;
            margin-bottom: 20px;
        }

        .info-item h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }

        .info-item p {
            color: #666;
        }

        .update-history {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #fafafa;
            border-radius: 10px;
        }

        .update-item {
            padding-bottom: 15px;
            margin-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }

        .update-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .update-version {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }

        .update-date {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
        }

        .update-content li {
            color: #666;
            line-height: 1.8;
            position: relative;
            padding-left: 15px;
        }

        .update-content li:before {
            content: "•";
            position: absolute;
            left: 0;
            color: #1E9FFF;
        }

        .download-options {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            padding: 30px;
            background-color: #fafafa;
            border-radius: 10px;
        }

        .download-btn {
            min-width: 200px;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .download-btn i {
            margin-right: 10px;
            font-size: 20px;
        }

        .direct-download {
            background-color: #1E9FFF;
            color: white;
        }

        .direct-download:hover {
            background-color: #0C8BDE;
            box-shadow: 0 5px 15px rgba(30, 159, 255, 0.3);
        }

        .cloud-download {
            background-color: white;
            color: #1E9FFF;
            border: 1px solid #1E9FFF;
        }

        .cloud-download:hover {
            background-color: #f0f9ff;
            box-shadow: 0 5px 15px rgba(30, 159, 255, 0.1);
        }

        /* 添加动画效果提升注意力 */
        .pulse-animation {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        @media (max-width: 768px) {
            .app-header {
                flex-direction: column;
                text-align: center;
            }

            .app-icon {
                margin-right: 0;
                margin-bottom: 15px;
            }

            .header-download {
                margin-top: 20px;
            }

            .download-options {
                flex-direction: column;
            }

            .preview-img {
                height: 300px;
            }

            .preview-item {
                height: 300px;
            }
        }
    </style>
</head>

<body>
    <div class="app-container">
        <!-- 应用头部信息 -->
        <div class="app-header">
            <img src="{$data.appIcon}" alt="应用图标" class="app-icon">
            <div class="app-title">
                <h1>{$data.appName}</h1>
                <p>{$data.appSubtitle}</p>
                <div>
                    <span class="app-badge">版本: {$data.appVersion}</span>
                    <span class="app-badge">大小: {$data.appSize}MB</span>
                    <span class="app-badge">支持: {$data.appSupportOS}</span>
                </div>
            </div>
            <!-- 在头部添加下载按钮 -->
            <div class="header-download">
                <a href="#direct-download" class="layui-btn download-btn direct-download pulse-animation">
                    <i class="layui-icon layui-icon-download-circle"></i>立即下载
                </a>
                <a href="#cloud-download" class="layui-btn download-btn cloud-download">
                    <i class="layui-icon layui-icon-cloud"></i>网盘下载
                </a>
            </div>
        </div>

        <!-- 应用预览图 -->
        <div class="preview-container">
            <h2 class="preview-title">应用预览</h2>
            <div class="layui-carousel" id="app-preview">
                <div carousel-item>
                    {volist name="images" id="img" key="index"}
                    <div class="preview-item">
                        <img src="{$img}" alt="预览图{$index}" class="preview-img">
                    </div>
                    {/volist}
                </div>
            </div>
        </div>

        <!-- 应用描述 -->
        <div class="app-desc">
            <h2 class="preview-title">{$data.descTitle}</h2>
            <p>{$data.appDescription}</p>
        </div>

        <!-- 应用信息 -->
        <div class="app-info">
            <div class="info-item">
                <h3><i class="layui-icon layui-icon-user"></i> 开发者</h3>
                <p>{$data.developer}</p>
            </div>
            <div class="info-item">
                <h3><i class="layui-icon layui-icon-date"></i> 发布日期</h3>
                <p>{$data.releaseDate}</p>
            </div>
            <div class="info-item">
                <h3><i class="layui-icon layui-icon-about"></i> 当前版本</h3>
                <p> {$data.appVersion}</p>
            </div>
            <div class="info-item">
                <h3><i class="layui-icon layui-icon-file"></i> 文件大小</h3>
                <p>{$data.appSize}MB</p>
            </div>
        </div>

        <!-- 更新历史 -->
        <div class="update-history">
            <h2 class="preview-title">更新历史</h2>
            {foreach $upgradeLog as $k => $v}
            <div class="update-item">
                <div class="update-version">版本 {$v.version}</div>
                <div class="update-date">{$v.date}</div>
                <ul class="update-content">
                    {$v.content|raw}
                </ul>
            </div>
            {/foreach}
        </div>

        <script src="__LAYUI__/layui.js"></script>
        <script>
            layui.use(['carousel', 'element'], function () {
                var carousel = layui.carousel;
                var element = layui.element;
                // 图片预览功能
                var $articleImages = document.querySelectorAll('.preview-img');
                var images = [];

                // 收集所有图片URL
                $articleImages.forEach(function (img) {
                    images.push({
                        src: img.src,
                        alt: img.alt
                    });
                });

                // 为每张图片绑定点击事件
                $articleImages.forEach(function (img, index) {
                    img.onclick = function () {
                        // 使用layer.photos进行图片预览
                        layer.photos({
                            photos: {
                                "title": "文章图片预览",
                                "id": "article-images",
                                "start": index,
                                "data": images
                            },
                            anim: 5 // 缩放动画效果
                        });
                    };
                });
                //轮播图实例
                carousel.render({
                    elem: '#app-preview',
                    width: '100%',
                    height: '500px',
                    interval: 3000,
                    anim: 'fade',
                    arrow: 'always', // 显示左右箭头
                    indicator: 'inside', // 指示器位置
                    autoplay: true, // 自动播放
                    trigger: 'hover', // 触发方式
                    scrollbar: 'none', // 不显示滚动条
                    touch: false // 启用触摸滑动
                });

                //下载按钮点击事件
                document.querySelectorAll('.direct-download').forEach(function (btn) {
                    btn.addEventListener('click', function (e) {
                        e.preventDefault();
                        const isExist = "{$isExist}"
                        if (isExist) {
                            layer.msg('开始下载应用...');
                            window.location.href = "{$download.apkFilePath}"
                        } else {
                            layer.msg('本地下载链接暂未配置')
                        }
                    });
                });

                document.querySelectorAll('.cloud-download').forEach(function (btn) {
                    btn.addEventListener('click', function (e) {
                        e.preventDefault();

                        // 获取当前网盘链接和提取码
                        const cloudLink = '{$download.cloudLink}';
                        const cloudPassword = '{$download.cloudPassword}';

                        layer.open({
                            type: 1,
                            title: '网盘下载',
                            area: ['300px', '250px'],
                            content: `
                <div style="padding: 20px;">
                    <p>网盘链接: ${cloudLink}</p>
                    <p style="margin-top: 15px;">提取码: ${cloudPassword}</p>
                    <button class="layui-btn layui-btn-fluid copy-link-btn" style="margin-top: 20px;">复制链接</button>
                </div>
            `,
                            success: function (layero, index) {
                                // 在弹窗创建完成后添加点击事件
                                const copyBtn = layero.find('.copy-link-btn');
                                copyBtn.on('click', function () {
                                    // 创建一个临时输入框用于复制
                                    const tempInput = document.createElement('input');
                                    tempInput.value = cloudLink;
                                    document.body.appendChild(tempInput);
                                    tempInput.select();
                                    document.execCommand('copy');
                                    document.body.removeChild(tempInput);

                                    // 提示用户复制成功
                                    layer.msg('网盘链接已复制');
                                });
                            }
                        });
                    });
                });
            });
        </script>
</body>

</html>